<template>
  <!-- 表格 -->
  <div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <!-- 入库编号 -->
      <span slot="applyCode" slot-scope="text, record">
        {{ record.applyCode }}
      </span>
      <!-- 入库仓库 -->
      <span slot="warehousingName" slot-scope="text, record">
        {{ record.warehousingName }}
      </span>
      <!-- 清点类型： -->
      <span slot="logisticsName" slot-scope="text, record">
        <div
          :class="record.countingType != '不清点' ? 'checktype' : 'nochecktype'"
        >
          {{ record.countingType }}
        </div>
      </span>
      <!-- 海外配送 -->
      <span slot="distributionType" slot-scope="text, record">
        {{ !record.distributionType ? "暂无" : record.distributionType }}
      </span>
      <!-- 入库装箱-->
      <span slot="boxListTit" style="width: 100%">
        <div class="box-tit">
          <div>装箱编号</div>
          <div>自定义编号</div>
          <div>箱数</div>
        </div>
      </span>
      <div slot="boxList" slot-scope="text, record">
        <div class="f-box">
          <div class="box-left">
            <div class="box-list" v-for="item in record.boxList" :key="item.id">
              <span class="box-no">箱号{{ item.boxNo }}</span>
            </div>
          </div>
          <div class="box-center">
            <div class="box-list" v-for="item in record.boxList" :key="item.id">
              <span class="box-no">
                {{ item.customNo }}
              </span>
            </div>
          </div>
          <div class="box-right">
            <span>
              {{ record.packingNumber }}
            </span>
          </div>
        </div>
      </div>
      <!-- 状态 -->
      <span
        slot="state"
        slot-scope="text, record"
        :style="record.state === '审核不通过' ? 'color:red' : 'color:#3EAE7C'"
      >
        {{ record.state }}
      </span>
      <!-- 时间 -->
      <span slot="submitTime" slot-scope="text, record">
        {{ record.submitTime ? record.submitTime.replace("T", " ") : "暂无" }}
      </span>
      <!-- 时间 -->
      <span slot="storageTime" slot-scope="text, record">
        {{
          record.storageTime === null || record.storageTime === ""
            ? "暂无"
            : record.storageTime.replace("T", "  ")
        }}
      </span>
      <span slot="remark" slot-scope="text, record">
        {{ record.remark === "" ? "暂无" : record.remark }}
      </span>
      <!-- 操作 -->
      <span slot="action" class="action" slot-scope="text, record">
        <!-- //提交订单 -->

        <a
          class="action"
          v-if="['待审核', '待发头程'].includes(keys)"
          @click="showModal(record, 'pass')"
          >审核</a
        >
        <a-divider type="vertical" v-if="['待发头程'].includes(keys)" />
        <a
          class="action"
          v-if="
            ['在途中', '已入库', '审核不通过'].includes(keys) &&
            flag != '入库订单'
          "
          @click="showModal(record, 'look')"
          >详情</a
        >
        <a
          class="action"
          v-if="['已接收'].includes(keys) && flag != '入库订单'"
          @click="showModal(record, 'finance')"
          >详情</a
        >
        <!-- <a
          class="action"
          v-if="['待发头程'].includes(keys) && flag != '入库订单'"
          @click="showModal(record, 'read')"
          >详情</a
        > -->
        <a
          class="action"
          v-if="flag === '入库订单'"
          @click="showInStoragesModal(record)"
          >详情</a
        >
        <a-divider
          type="vertical"
          v-if="['待审核', '待发头程', '在途中'].includes(keys)"
        />
        <a
          @click="downloadCartonLabel(record)"
          class="action"
          v-if="['待审核', '待发头程', '在途中'].includes(keys)"
          >下载</a
        >
      </span>
    </a-table>
  </div>
</template>

<script>
import { box_tags } from "@/apis/common";
import req from "@/utils/req";
// 表格数据
import {
  check_Order,
  del_Order,
  undo_Order,
  updateByFba,
} from "@/apis/clientSide/OrderManage/Instock";
export default {
  //接收入库申请表格标题
  props: ["tableData", "getTabData", "keys", "flag"],

  data() {
    return {
      currentTabKey: "0",
      // 模态框
      visible: false,
      // 模态框标杆
      modelFlag: "",
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "客户编号",
          width: "7%",
          dataIndex: "tenantId",
          key: "tenantId",
          // scopedSlots: { customRender: "key" },
          align: "center",
          ellipsis: true,
        },
        {
          title: "入库编号",
          width: "7%",
          dataIndex: "applyCode",
          key: "applyCode",
          // scopedSlots: { customRender: "key" },
          align: "center",
          ellipsis: true,
        },
        {
          title: "入库仓库",
          dataIndex: "warehousingName",
          key: "warehousingName",
          width: "7%",
          scopedSlots: { customRender: "warehousingName" },
          align: "center",
          ellipsis: true,
        },
        {
          title: "SKU数",
          dataIndex: "skuNumber",
          key: "skuNumber",
          width: "6%",
          scopedSlots: { customRender: "skuNumber" },
          align: "center",
          // ellipsis: true,
        },
        {
          slots: { title: "boxListTit" },
          dataIndex: "boxList",
          key: "boxList",
          width: "18%",
          ellipsis: true,
          scopedSlots: { customRender: "boxList" },
          align: "center",
        },
        {
          title: "清点类型",
          dataIndex: "logisticsName",
          key: "logisticsName",
          width: "8%",
          scopedSlots: { customRender: "logisticsName" },
          align: "center",
        },
        {
          title: "入库方式",
          dataIndex: "distributionType",
          key: "distributionType",
          width: "8%",
          scopedSlots: { customRender: "distributionType" },
          align: "center",
        },
        {
          title: "状态",
          dataIndex: "state",
          key: "state",
          width: "8%",
          scopedSlots: { customRender: "state" },
          align: "center",
          ellipsis: true,
        },
        {
          title: "提交时间",
          dataIndex: "submitTime",
          key: "submitTime",
          width: "10%",
          scopedSlots: { customRender: "submitTime" },
          align: "center",
        },
        {
          title: "预计到仓时间",
          dataIndex: "whtEndTime",
          key: "whtEndTime",
          width: "8%",
          scopedSlots: { customRender: "whtEndTime" },
          align: "center",
        },

        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          width: "10%",
          scopedSlots: { customRender: "remark" },
          align: "center",
          ellipsis: true,
        },
        {
          title: "操作",
          key: "operation",
          width: 180,
          fixed: "right",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ];
    },
  },
  methods: {
    // 外箱标下载
    async downloadCartonLabel(record) {
      let res = await box_tags(record.key);
      req.exportPDF(`${record.applyCode}外箱标`, res);
    },
    //模态框详情按钮
    showInStoragesModal(rowData) {
      setTimeout(() => {
        this.$bus.$emit("inStoragesData", rowData);
      }, 1);
    },
    //删除按钮
    async delRow(rowData) {
      let { code } = await del_Order(rowData.key);
      if (code === "10000") {
        this.tabData(this.keys);
        this.typeCount();
      }
    },
    //点击提交按钮
    showModal(record, flag) {
      let _this = this;
      if (flag === "pass") {
        setTimeout(() => {
          this.$bus.$emit("RowDataUndertakes", record, "look", flag);
        }, 1);
      } else if (flag === "finance") {
        setTimeout(() => {
          this.$bus.$emit("RowDataUndertakes", record, "look", flag);
        }, 1);
      } else if (flag === "look") {
        setTimeout(() => {
          this.$bus.$emit("RowDataUndertakes", record, "look", flag);
        }, 1);
      } else if (flag === "read") {
        setTimeout(() => {
          this.$bus.$emit("RowDataUndertakes", record, "look", flag);
        }, 1);
      } else if (flag === "withdraw") {
        this.$confirm({
          cancelText: "取消",
          okText: "确认",
          title: `确认要撤回入库编号为${record.applyCode}的信息吗?`,
          content: () => (
            <div style="color:red;">
              【撤回】后数据退回待提交状态，请谨慎操作！
            </div>
          ),
          onOk() {
            return new Promise((resolve) => {
              setTimeout(async () => {
                let { code } = await undo_Order(`${record.key}`);
                if (code === "10000") {
                  _this.tabData(_this.tabKeys);
                  _this.typeCount();
                  resolve();
                }
              }, 1300);
            }).catch(() => console.log("Oops errors!"));
          },
        });
      }
    },
    //提交审核订单
    handleOk() {
      if (this.modelFlag === "submit") {
        this.ModalText = "正在提交中...";
        this.confirmLoading = true;
        setTimeout(async () => {
          this.visible = false;
          this.confirmLoading = false;
          let { code } = await check_Order(`${this.rowId}`);
          if (code === "10000") {
            this.tabData(this.tabKeys);
            this.typeCount();
          }
        }, 700);
      } else if (this.modelFlag === "updateByFba") {
        this.ModalText = "正在提交中...";
        this.confirmLoading = true;
        setTimeout(async () => {
          this.visible = false;
          this.confirmLoading = false;
          let { code } = await updateByFba(`${this.rowId}`);
          if (code === "10000") {
            this.tabData(this.tabKeys);
            this.typeCount();
          }
        }, 700);
      } else if (this.modelFlag === "withdraw") {
        this.ModalText = "正在撤回中...";
        this.confirmLoading = true;
        setTimeout(async () => {
          this.visible = false;
          this.confirmLoading = false;
          let { code } = await undo_Order(`${this.rowId}`);
          if (code === "10000") {
            this.tabData(this.tabKeys);
            this.typeCount();
          }
        }, 700);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
.f-box {
  display: flex;
  border: 1px solid #ccc;
  justify-content: space-around;
  .box-left {
    flex: 1;
    .box-list {
      display: flex;

      .box-no {
        width: 100%;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
      }
    }
    .box-list:last-child {
      .box-no {
        border-bottom: none;
      }
    }
  }
  .box-center {
    flex: 1;
    .box-list {
      display: flex;
      .box-no {
        width: 100%;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
      }
    }
    .box-list:last-child {
      .box-no {
        border-bottom: none;
      }
    }
  }
  .box-right {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
    span {
      width: 100%;
    }
  }
}
.box-tit {
  width: 100%;
  display: flex;
  border: 1px solid #ccc;
  box-sizing: border-box;
  div {
    flex: 1;
    border-right: 1px solid #ccc;
  }
  div:last-child {
    border-right: none;
  }
}
.checktype {
  padding: 3px;
  border: 1px solid #129556;
  color: #129556;
  border-radius: 5px;
}
.nochecktype {
  background-color: #aaaaaa;
  padding: 3px;
  border: 1px solid #aaaaaa;
  color: #fff;
  border-radius: 5px;
}
/deep/.ant-table-header-column {
  width: 100%;
}
.ant-divider,
.ant-divider-vertical {
  margin: 0 5px !important;
}
</style>
